{% set isNav = true %}
{% extends './layout/layout.html' %}
{% import './macros/blog-list.html' as list %}
{% import './macros/loadMore.html' as loadBtn %}
{% block headCss %}

{% endblock %}
{% block content %}
<div class="container">
  <div class="col-lg-8">
    <h2>广场页</h2>
    <div class="item-wrapper">
      {% if blogList.length > 0 %}
        {{ list.list(blogList,isCanReply=true) }}
        {% else %}
        <p>暂无数据</p>
        {% endif %}
    </div>
    {{ loadBtn.loadMore(
      pageIndex,
      pageSize,
      count,
      api='/api/blog/loadSquareMore/'
    )}}
  </div>

  <div class="col-lg-4">

  </div>
</div>
{% endblock %}

{% block js %}
{#
<script>
  const pageIndex = parseInt($('.btn-load-more').data('page-index'));
  const pageSize = parseInt('{{pageSize}}');
  const count = parseInt($('.btn-load-more').data('count'));
  console.log(pageIndex, pageSize, count)
  if (pageSize * pageIndex >= count) {
    $(".btn-load-more").hide()
  }
  $(".btn-load-more").click(function () {
    const pageIndex = $(this).data('page-index');

    ajax.get(`/api/blog/loadSquareMore/${pageIndex}`,
      function (err, res) {
        if (err) {
          alert(err)
        }
        $(".btn-load-more").data('page-index', pageIndex + 1)
        // 渲染dom
        res.blogList.forEach(item => {
          let $image = "";
          if (item.image) {
            $image = `
            <a href="${item.image}" target="_blank">
              <img class="blog-image" src="${item.image}" alt="" width="100">
            </a>`
          }
          const $loadMoreTemplate = ` <div class="blog-item">
        <div class="user-info">
          <img class="user-avatar" src="${item.user.avatar}" alt="" style="border-radius: 50%; " width="50px"
            height="50px">
        </div>
        <div class="blog-info">
          <div class="blog-content">
            <div>
              <a href="###"><span class="username">${item.user.nickName}</span>:</a>
              <span class="text">${item.content}</span>
            </div>
           ${$image}
          </div>
          <div class="create-time">
            <p>${item.createdAtFormat}</p>
          </div>
        </div>
      </div>
      <hr>`
          $('.item-wrapper').append($loadMoreTemplate)
        })
        if (pageSize * (pageIndex + 1) >= count) {
          $(".btn-load-more").hide()
        }
      })
  })
</script>
#}
{% endblock %}